import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Container } from './style';
import { CSSTransition } from 'react-transition-group';
import DetailHeader from '@/baseUI/detailHeader';
import Scroll from '@/baseUI/scroll';
import { isEmptyObject } from '@/api/utils';
import { HEADER_HEIGHT } from '@/api/local_data';
import style from '@/assets/global-style';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getAlbumListAction } from './store';
import Loading from '@/baseUI/loading';
import AlbumDetail from '@/components/album-detail';
import MusicNote from '@/baseUI/music-note/index';
export default memo(function Album(props) {
  //mock 数据
  // 从路由中拿到歌单的 id
  const id = props.match.params.id;
  const { currentAlbum, enterLoading, playList } = useSelector(
    (state) => ({
      currentAlbum: state.album.currentAlbum,
      enterLoading: state.album.enterLoading,
      playList: state.player.playList,
    }),
    shallowEqual
  );
  const musicNoteRef = useRef();

  const musicAnimation = (x, y) => {
    musicNoteRef.current.startAnimation({ x, y });
  };
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAlbumListAction(id));
  }, [dispatch, id]);
  const [showStatus, setShowStatus] = useState(true);
  const handleBack = useCallback(() => {
    setShowStatus(false);
  }, []);
  const [title, setTitle] = useState('歌单');
  const [isMarquee, setIsMarquee] = useState(false); // 是否跑马灯

  const detailHeaderEl = useRef(null);

  const handleScroll = useCallback(
    (pos) => {
      const minScrollY = -HEADER_HEIGHT;
      const percent = Math.abs(pos.y / minScrollY);
      const headerDom = detailHeaderEl.current;
      // 滑过顶部的高度开始变化
      if (pos.y < minScrollY) {
        headerDom.style.backgroundColor = style['theme-color'];
        headerDom.style.opacity = Math.min(1, (percent - 1) / 2);
        setTitle(currentAlbum.name);
        setIsMarquee(true);
      } else {
        if (headerDom) {
          headerDom.style.backgroundColor = '';
          headerDom.style.opacity = 1;
          setTitle('歌单');
          setIsMarquee(false);
        }
      }
    },
    [currentAlbum.name]
  );
  return (
    <CSSTransition
      // 根据showStatu变量进行控制
      in={showStatus}
      timeout={300}
      classNames="fly"
      // 进场动画
      appear={true}
      unmountOnExit
      // 先让页面切出动画执行一次，然后在动画执行完的瞬间跳转路由
      onExited={props.history.goBack}
    >
      <Container play={playList.length}>
        <DetailHeader
          ref={detailHeaderEl}
          title={title}
          handleClick={handleBack}
          isMarquee={isMarquee}
        ></DetailHeader>
        {!isEmptyObject(currentAlbum) ? (
          <Scroll bounceTop={false} onScroll={handleScroll}>
            <AlbumDetail
              currentAlbum={currentAlbum}
              musicAnimation={musicAnimation}
            />
          </Scroll>
        ) : null}
        {enterLoading ? <Loading></Loading> : null}
        <MusicNote ref={musicNoteRef}></MusicNote>
      </Container>
    </CSSTransition>
  );
});
